<template>
    <div class="search">
        <div class="searchTop">
            <van-icon name="arrow-left" size="0.5rem" @click="historyBack" />
            <van-search class="searchInput" v-model="searchValue" show-action placeholder="请输入搜索关键词" shape="round">
                <template #action>
                    <div @click="onClickButton">搜索</div>
                </template>
            </van-search>
        </div>
        <van-tabs v-model:active="activeTab" swipeable>
            <van-tab title="单曲">
                <songs :songsList="songsList" />
            </van-tab>
            <van-tab title="歌单">
                <musicList :playLists="playLists" />
            </van-tab>
            <van-tab title="视频">
                <videoList :videoLists="videoLists" />
            </van-tab>
            <van-tab title="歌手">
                <singer :singerList="singerList" />
            </van-tab>
        </van-tabs>
    </div>
    <VideoListPopup />
    <van-notify id="van-notify" />
</template>

<script lang='ts' setup>
import store from '@/store';
import { showNotify } from 'vant';
import { onMounted, ref, watch } from 'vue'
import songs from './components/songs.vue'
import musicList from './components/musicList.vue'
import videoList from './components/videoList.vue'
import singer from './components/singer.vue'
import { useRoute } from 'vue-router';
import VideoListPopup from '@/components/VideoListPopup/index.vue';
const queryKeyWord = useRoute().query.keyWord
let activeTab = ref(0)
let searchValue = ref(useRoute().query.keyWord || '')
let songsList = ref([])
let playLists = ref([])
let videoLists = ref([])
let singerList = ref([])
onMounted(() => {
    getSongsList()
})
const onClickButton = async () => {
    if (searchValue.value === queryKeyWord) {
        return
    }
    let historyList = JSON.parse(window.localStorage.getItem('searchHistory'))
    historyList.unshift(searchValue.value)
    window.localStorage.setItem('searchHistory', JSON.stringify(historyList))
    activeTab.value = 0
    getSongsList()
    playLists.value = []
    videoLists.value = []
    singerList.value = []
}
const historyBack = () => {
    history.back()
}
const getSongsList = async () => {
    let res = await store.dispatch('searchKeyWord', { keyword: searchValue.value, type: 1 })
    if (res.data.code === 200) {
        songsList.value = res.data.result.songs
    } else {
        showNotify({ type: 'danger', message: '搜索歌曲失败' });
    }
}
const getPlayLists = async () => {
    let res = await store.dispatch('searchKeyWord', { keyword: searchValue.value, type: 1000 })
    if (res.data.code === 200) {
        playLists.value = res.data.result.playlists
    } else {
        showNotify({ type: 'danger', message: '搜索歌单失败' });
    }
}
const getVideoLists = async () => {
    let res = await store.dispatch('searchKeyWord', { keyword: searchValue.value, type: 1004 })
    if (res.data.code === 200) {
        videoLists.value = res.data.result.mvs
    } else {
        showNotify({ type: 'danger', message: '搜索视频失败' });
    }
}
const getSingerList = async () => {
    let res = await store.dispatch('searchKeyWord', { keyword: searchValue.value, type: 100 })
    if (res.data.code === 200) {
        singerList.value = res.data.result.artists
    } else {
        showNotify({ type: 'danger', message: '搜索歌手失败' });
    }
}
watch(activeTab, async (newValue) => {
    if (newValue === 1 && !playLists.value.length) {
        getPlayLists()
    }
    if (newValue === 2 && !videoLists.value.length) {
        getVideoLists()
    }
    if (newValue === 3 && !singerList.value.length) {
        getSingerList()
    }
})
watch(() => searchValue.value, (newValue) => {
    if (!newValue) {
        history.back()
    }
})
</script>
 
<style lang = "less" scoped>
.search {
    min-height: 100vh;
    width: 100%;

    .searchTop {
        width: 100%;
        height: 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .searchInput {
            width: 90%;
        }
    }
}
</style>